<template>
  <div class="tab-third" >
    <el-row style="margin: 0 0 13px 0;font-size: 13px;">
      <el-col :span="8">
        <el-checkbox v-model="checked" @change="handelCheckChange" style="color: #409EFF;">显示同一用户的重复提交
        </el-checkbox>
      </el-col>
      <el-col :span="16" style="text-align: right">
        <a class="export" :href="`${baseUrl}/content/micro/form/record/export/${activeid}?type=${this.$route.matched[1].name == 'minPage'?5:6}`">
          <img src="../assets/icon-export-409EFF.png" height="20" alt="export.png">
          <span>导出表单提交数据</span>
        </a>
      </el-col>
    </el-row>
    <el-table :data="list" v-loading="loading" border style="width: 100%">
      <el-table-column prop="userType" label="客户详情"></el-table-column>
      <el-table-column prop="accessTime" label="提交时间"></el-table-column>
    </el-table>
    <div class="pagination-text-right">
      <el-pagination layout="total,prev, pager, next"
                     :current-page.sync="currentPage"
                     :total="page.total" :page-size="10" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script type="text/babel">
  import IconUnit from '../components/IconUnit.vue'
  import { submitList } from '@/service/getData'
  import config from '@/config/env'
  export default {
    data () {
      return {
        loading: false,
        checked: false,
        currentPage: 1,
        list: [],
        page: {
          current: 1,
          pages: 1,
          size: 10,
          total: 0
        }
      }
    },
    computed: {
      baseUrl () {
        return config.baseUrl2
      },
      activeid () {
        return this.$route.params.id
      }
    },
    components: {
      't-iconunit': IconUnit
    },
    methods: {
      axiosSubmitList (payload) {
        this.loading = true
        submitList(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.list = resJson.data.list
              this.page = resJson.data.page
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      // check切换
      handelCheckChange (event) {
        this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
      },
      // 页面切换
      handleCurrentChange () {
        this.axiosSubmitList({
          'logicId': parseInt(this.$route.params.id),   // 微页面ID,或者表单ID
          // 'pageType': this.$route.matched[0].name == 'minPage' ? 0 : 1, //0:微页面数据 , 1:表单页面数据
          'showRepeatSubmit': this.checked ? 1 : 0, // 显示同一用户的重复提交  0:显示,1:显示
          'page': this.currentPage, // 当前页
          'size': 10 // 分页条数
        })
      }
    },
    mounted () {
    },
    activated () {
      this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">


</style>
